<template>
    <el-form :inline="true" size="large">
        <el-form-item label="公告名称">
          <el-input v-model="formData.announcementName" placeholder="请输入公告名称" clearable @clear="refreshPage" style="width: 250px;"></el-input>
      </el-form-item>
        <el-form-item label="心理导师名称">
          <el-select v-model="formData.consultId" clearable @clear="refreshPage" placeholder="请选择用户名" style="width: 240px">
              <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="添加时间">
              <el-date-picker v-model="daterange" value-format="YYYY-MM-DD" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :size="size"  @clear="refreshPage" />
          </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getAllComm">搜索</el-button>
            <el-button type="primary" @click="adddate">新增资讯</el-button>
            <el-button type="danger" @click="removeBatch">批量删除</el-button>
        </el-form-item>
    </el-form>
    <el-form>
        <el-table :data="visitList" border class="my-table" size="large" @selection-change="handleSelectionChange">
            <el-table-column type="selection" :selectable="selectable" width="55" />
            <el-table-column prop="id" label="ID" align="center"></el-table-column>
            <el-table-column prop="announcementName" label="公告名称" align="center"></el-table-column>
            <el-table-column prop="announcementContent" label="公告内容" align="center">
                <template v-slot="scope">
                    <div class="course-intro-truncate">{{ scope.row.announcementContent }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="releaseTime" label="发布时间" align="center"></el-table-column>
            <el-table-column prop="consult.name" label="心理导师名称" align="center"></el-table-column>
            <el-table-column prop="del" label="状态" align="center">
                <template v-slot="scope">  
                    <span :class="{c1:scope.row.del==0,c2:scope.row.del==1}">{{ scope.row.del == 0 ? '正常' : '删除' }}</span>  
                </template> 
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template v-slot="scope">
                  <el-link type="primary" @click="updata(scope.row)">修改</el-link>
                  <el-link type="danger" @click="handleDownshelf(scope.row)">删除</el-link>
              </template>
          </el-table-column>
        </el-table>
    </el-form>
    <el-dialog v-model="dialogFormVisible" :title="title" width="525" @close="cancel">
      <el-form :model="adddate" class="form1">
          <el-form-item label="公告名称" :label-width="formLabelWidth">
              <el-input v-model="visitData.announcementName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="公告内容" :label-width="formLabelWidth">
              <el-input v-model="visitData.announcementContent" autocomplete="off" />
          </el-form-item>
          <el-form-item label="心理导师名称" :label-width="formLabelWidth">
                <el-select v-model="visitData.consultId" clearable @clear="refreshPage" placeholder="请选择用户名" style="width: 240px">
                    <el-option v-for="item in classList1" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
      </el-form>
      <template #footer>
          <div class="dialog-footer">
              <el-button @click="cancel">取消</el-button>
              <el-button type="primary" @click="handleSubmit">确定</el-button>
          </div>
      </template>
</el-dialog>
  <el-row>
      <el-pagination
        :page-sizes="[5, 10, 30, 40]"
        :size="size"
        :disabled="disabled"
        :background="background"
        :default-page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="pageNumChange"
      />
    </el-row>
  </template>
  
  <script setup>
  //icon图标
  import { Search,Refresh,Edit,CloseBold,Plus,Share,ArrowRight,Star } from '@element-plus/icons-vue'
  //信息提示
  import { ElForm, ElMessage, ElMessageBox, uploadProps } from 'element-plus';
  //getCurrentInstance获取全局对象，用于获取axios属性
  //onMounted页面加载后开始挂载执行
  //watchEffect属性监听器，daterange响应后开始执行函数，这里用于获取开始时间和结束时间
  import { getCurrentInstance, onMounted, ref, watchEffect,onBeforeUnmount } from 'vue';
  //接收全局对象
  const CurrentInstance=getCurrentInstance()
  //获取全局对象挂载的naxios赋值给$http来代替naxios
  const {$http}=CurrentInstance.appContext.config.globalProperties
  //弹出框的标题
  const title = ref("")
  //默认动态页码为0
  const total=ref(0)
  //初始化添加弹框，使其不显示
  const dialogFormVisible = ref(false)
  //动态方法，默认弹出框为add
  const operationType = ref('add');
  //添加弹出框左边距
  const formLabelWidth = '140px'
  //额外定义aterange来包含formDate中的开始时间和结束时间
  const daterange=ref('')
  //用户数据
  const classList = ref([]);
  const classList1 = ref([]);
  //定义formData来接收访问地址的数据
  const formData =ref({
    announcementName:"",    
    consultId:"",
    pageNum:1 ,// 页码
    pageSize:5, // 每页展示条数
    startTime:'',
    endTime:'',
    ids:[]//多选id
  })
  //定义的表格数据来存放访问地址中的数据
  let visitList=ref([
    
  ])
  let visitData=ref({
    id:"",
    announcementName:"",
    announcementContent:"",
    releaseTime:"",
    consultId:"",
    del:""
  })
  //监听函数，if else是为了防止访问空时报错，同时获取页面的开始时间和结束时间
  watchEffect(function(){
    if(daterange.value){    
          formData.value.startTime=daterange.value[0]
          formData.value.endTime=daterange.value[1]
      }else{
          formData.value.startTime = '';
          formData.value.endTime = '';
      }
  })
  //点击搜索的清除组件，刷新页面
  function refreshPage() {
      formData.value.startTime = '';
      formData.value.endTime = '';
      getAllComm();
  }
  //生命周期中挂载到页面加载之后开始执行
  onMounted(()=>{
    getAllComm()
    getListComm()
  })
  //获取点击的分页页码并执行搜索功能
  function pageNumChange(num){
      formData.value.pageNum=num;
      getAllComm()
  }
  function handleSizeChange(size){
      formData.value.pageSize=size;
      getAllComm()
  }
  //搜索功能，将formData的定义初始属性传给访问地址，并传回来地址中的表格数据和各个属性
  function getAllComm(){
    $http({
        method:"get",
        url:"http://localhost:8081/sfzy/information/page",
        params:formData.value
    }).then(res=>{ 
        visitList.value=res.data.data.list;//获取访问地址中的列表数据传给visitList 
        total.value=res.data.data.total;
    })
  }
  function getListComm() {
      $http({
          method: "get",
          url: "http://localhost:8081/sfzy/consult/page?position=心理导师"
      }).then(res => {
          classList.value = res.data.data.list;
          classList1.value = res.data.data.list;
      })
  }
  // 新增分类函数
function addNewCategory() {
    $http({
        method: "post",
        url: "http://localhost:8081/sfzy/information",
        data: visitData.value
    }).then(res => {
        if (res.data.code === 200) {
            ElMessage.success("添加成功！");
        } else {
            ElMessage.error("添加失败");
        }
        dialogFormVisible.value = false;
        getAllComm();
        cancel();
    });
}
// 使添加框显示（新增分类）
function adddate() {
    dialogFormVisible.value = true;
    title.value = "新增资讯";
    operationType.value ='add';
    // 初始化相关数据（可根据实际需求补充更多初始化操作）
    visitData.value = {
        id:"",
        announcementName:"",
        announcementContent:"",
        releaseTime:"",
        consultId:"",
        del:""
    };
}
// 修改分类函数
function updateCategory(val) {
    $http({
        method: "put",
        url: "http://localhost:8081/sfzy/information",
        data: val
    }).then(res => {
        if (res.data.code === 200) {
            ElMessage.success("修改成功！");
        } else {
            ElMessage.error("修改失败");
        }
        
        dialogFormVisible.value = false;
        getAllComm();
        cancel();
    });
}
// 点击修改链接弹出修改框并执行修改操作
function updata(val) {
    dialogFormVisible.value = true;
    title.value = "修改资讯";
    visitData.value = val;
    operationType.value ='modify';
}
// 统一提交函数，根据操作类型调用相应函数
function handleSubmit() {
    if (operationType.value === 'add') {
        addNewCategory();
    } else if (operationType.value ==='modify') {
        updateCategory(visitData.value);
    }
}
//删除功能
function handleDownshelf(val){
    if (formData.value.ids.length > 0) {
        ElMessage({
            type: 'warning',
            message: '已选择了多行，请使用批量删除功能进行操作！',
        });
        return;
    }
    ElMessageBox.confirm(
    '是否确认删除小区数据?',
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const { id } = val;
      $http({
          method:"delete",
          url:`http://localhost:8081/sfzy/information/${id}`,
          data:{}
      }).then(res=>{
          if (res.data.code === 200) {  
              ElMessage.success("删除成功！");  
          } else {  
              ElMessage.error("删除失败");  
          }  
          getAllComm(); 
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除操作',
      })
    })
}
//批量删除
const selectable = (row) => ![].includes(row.id)
const handleSelectionChange = (val) => {
  formData.value.ids = val.map(item => item.id);
}
function removeBatch(){
    ElMessageBox.confirm(
    '是否确认删除小区数据?',
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const idsArray  = formData.value.ids;
      // 将数组idsArray中的元素拼接成字符串形式，用逗号分隔
      const idsStr = idsArray.join(',');
      
      $http({
          method:"delete",
          url:`http://localhost:8081/sfzy/information?ids=${idsStr}`,
          data:{}
      }).then(res=>{
          if (res.data.code === 200) {  
              ElMessage.success("删除成功！");  
              // 判断当前页是否还有数据，如果没有则将页码减1
                if (visitList.value.length === 0 && formData.value.pageNum > 1) {
                    formData.value.pageNum--;
                }
                // 清理ids参数
                formData.value.ids = [];
          } else {  
              ElMessage.error("删除失败");  
          }  
          getAllComm(); 
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除操作',
      })
    })
}
//重置添加输入框内容
function cancel(){
  dialogFormVisible.value = false;
  visitData.value = {
    id:"",
    announcementName:"",
    announcementContent:"",
    releaseTime:"",
    consultId:"",
    del:""
  }
  getAllComm()
}
  </script>
    
  <style scoped>
    .demo-form-inline .el-input {--el-input-width: 220px;}
    .demo-form-inline .el-select {--el-select-width: 220px;}
    .el-link {padding: 0 5px;}
    .el-form{width: 1420px;}
    .el-input{width: 300px;}
    .form1{width: 100%;}
    .el-pagination{margin-top: 25px;}
    .coordinates{margin-left: 10px;}
    .my-table :deep(th){background-color: #1890ff;color: #ffffff;text-align: center;}
    .mendian{margin-bottom: 15px;}
    .active{color: green;}
    .avatar{
        width: 250px;
        height: 220px;
        display: block;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }
  
    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }
  
    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 250px;
        height: 178px;
        text-align: center;
    }
    .c1{color: #1890ff;cursor: pointer;}
    .c2{color: red;cursor: pointer;}
    .table-img {
      width: 100px; /* 根据需要调整图片宽度 */
      height: 100px; /* 根据需要调整图片高度 */
      object-fit: cover; /* 控制图片如何填充容器，cover会保持图片比例并填满容器 */
  }
  /* 四行以外的变省略号 */
  .course-intro-truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* 这里设置为4行，可根据需求调整 */
    overflow: hidden;
}
  </style>